<template>
    <div>

<van-tabs v-model:active="active" @click-tab="selec">
  <van-tab  title='全部'  >
  </van-tab>
  <van-tab  title='待付款'  >
  </van-tab>
  <van-tab  title='待发货'  >
  </van-tab>
  <van-tab  title='已发货'  >
  </van-tab>
  <van-tab  title='已收货' >
  </van-tab>
  <van-tab  title='已评价'  >
  </van-tab>
</van-tabs>
  <div  v-for="(item,index) in orderlist" :key="index"  v-show="change(item.status,item.is_out,item.is_take)" class="orderid">
    <span class="fl">复制</span>
    <span>编号:{{item.order_id}}</span>
  
  <van-card
  num="2"
  price="2.00"
  desc="描述信息"
  :title="item.goodsInfo.message[0].title"
  :thumb="item.goodsInfo.message[0].thumb_path"
>

</van-card>
<p>总价&yen;10098.00,&nbsp;&nbsp;优惠&yen;&nbsp;&nbsp; 实付款 &yen;{{item.actual_price}}</p>
<div class="flr">



<van-button v-if="item.is_take==0 && item.is_out==1 && item.status==1" color="linear-gradient(to right, #ff6034, #ee0a24)">
  查看物流
</van-button>

<van-button v-if="item.is_take == 1 && item.is_out == 1 && item.status == 2" color="linear-gradient(to right, #ff6034, #ee0a24)">
  去评价
</van-button>
<van-button v-if="item.status==0 " color="linear-gradient(to right, #ff6034, #ee0a24)">
  立即付款
</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  订单详情
</van-button>
</div>
</div>
</div>


</template>

<script>

import {  fetchuserorder  }  from '@/API/order.js'
import {  fetchshopcarlist  }  from '@/API/goods.js'
import { ref } from 'vue';
import {  useStore} from 'vuex'
    export default {
    setup() {
    const active = ref(0);
    const store = useStore();
    const orderlist=ref([])
    const goodslist =ref([])
    const status = ref('all')
        const onClickTab = ({ title }) => console.log(title);
    const getorder =async ()=>{
    let result =   await fetchuserorder(store.state.userInfo.id)
      goodslist.value=[]
      result.forEach(item => {
        goodslist.value.push(fetchshopcarlist(item.goods_ids))
      });
     let message = await  Promise.all(goodslist.value)
     result.map((item ,index)=>{
       item.goodsInfo = message[index]
     })




       orderlist.value= result
       console.log( orderlist.value);
    }
    getorder()
    return { active,
    orderlist,
    goodslist,
    status
    
    };
  },
  methods:{
    selec({title}){
    let selemap={
      '全部':"all",
      '待付款':"0-0-0",
      '待发货':"1-0-0",
      '已发货':"1-1-0",
      '已收货':"1-1-1",
      '已评价':"2-1-1",
    }
      this.status = selemap[title]

    },

  },
  computed:{
    change:function(){

      return      (a,b,c)=>{
      let result =''+a+'-'+b+'-'+c;
      if(this.status  == 'all'){
        return "1"
      }
        return result ==this.status 
      }
    }
  }
    }
</script>

<style lang="scss" scoped>
.orderid{
  width: 13.5rem;
  margin: 0 auto;
  padding: 0 0.2rem;
  padding-top: 0.2rem;
  margin-bottom: 0.5rem;
  background-color: #f7f8fa;
  box-shadow: 0 0  0.2rem #ccc;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  span{
    font-size: 0.6rem;

  }
  overflow: hidden;
  p{
    text-align: right;
    font-size: 0.6rem;
  }
}
.flr{
  float: right;
  
}
</style>